<template>
  <h1>整个对象：{{ user }}</h1>
  <h3>姓名：{{ name }}</h3>
  <h3>年龄：{{ age }}</h3>
  <button @click="user.age += 1">点击我年龄+1</button>
</template>

<script>
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const user = reactive({
      name: '小白兔',
      age: 22,
      cp: {
        name: '陈嘉丽',
        age: 23,
      },
    });
    console.log(user);

    // 对象结构或者是展开对象，都是不能实现响应式的
    // 实现响应式方式 toRefs
    // 写法1
    // const { name, age } = toRefs(user);
    // return { name, age, user };

    // return { ...user, user };
    // 写法1
    // return { name, age, user };

    // 写法2
    return { ...toRefs(user), user };
  },
};
</script>
